<template>
    <div class="home-container">
      <el-row :gutter="15" class="home-card-two mb15">
<!--        <el-col :xs="24" :sm="24" :md="24" :lg="26" :xl="26">
          <div class="home-card-top">
            <div class="box-card">
              <div class="box-card-item">
                <p>瀛泰管理系统1.0</p>
                <p><a target="_blank" class="text-info" href="http://www.wintell.cn/">瀛泰律师事务所官网</a></p>
              </div>
              <div class="box-card-item">
                <p>瀛泰管理系统1.0 提供了登录，管理文章，邮件模板管理等模块</p>
              </div>
&lt;!&ndash;              <div class="box-card-item">
                <p class="text-danger" style="font-weight: bold;font-size: 18px;">插件商城(目前只支持gfast2.0)</p>
                <p>
                  <a target="_blank" class="text-danger" style="font-weight: bold;font-size: 18px;" href="https://plugins.g-fast.cn/store">https://plugins.g-fast.cn/store</a>
                </p>
              </div>&ndash;&gt;
            </div>
          </div>
        </el-col>-->
      </el-row>
      <el-row :gutter="15" class="home-card-two mb15">
        <el-col :xs="24" :sm="8" :md="8" :lg="10" :xl="10">
          <div class="home-card-item">
            <el-card class="box-card kj">
              <template #header>
                <div class="clearfix">
                  <span class="title">瀛泰律师事务所</span>
                </div>
              </template>
              <p>瀛泰2005年成立于上海，经过十多年的稳健发展，已经成为一家极具专业能力，能为各类行业客户提供一站式深度法律服务和解决方案的综合性律师事务所。瀛泰目前在天津、青岛、舟山、宁波、广州、海口等地设有分所，并于2016年和英国夏礼文律师事务所（HFW) 取得中国上海自由贸易试验区联营许可</p>
              <div class="git-res">
                <el-link type="primary" icon="el-icon-cloudy" href="http://www.wintell.cn/yingtai/toAboutYingtaiPc.do" >关于瀛泰</el-link>
                <el-link type="success" icon="el-icon-user" href="http://www.wintell.cn/yingtai/toRongyuPc.do">荣誉资质</el-link>
                <el-link type="info" icon="el-icon-s-home" href="http://www.wintell.cn/yingtai/3/toNewsPc.do">公益人文</el-link>
              </div>
              <div class="product">
                <h3>公司产品</h3>
                <ul>
                  <li><a href="http://www.wintell.cn/yingtai/toPersonnelPc.do" target="_blank" class="text-danger">专业人员</a></li>
                  <li><a href="http://www.wintell.cn/yingtai/0/toServicePc.do" target="_blank" class="text-danger">国内分所</a></li>
                  <li><a href="http://www.wintell.cn/yingtai/toServiceGjPc.do" target="_blank" class="text-danger">国际联营</a></li>
                  <li><a href="http://www.wintell.cn/yingtai/2/toNewsPc.do" target="_blank" class="text-danger">近期动态</a></li>
                </ul>
              </div>
            </el-card>
            <el-card class="box-card xx">
              <template #header>
                <div class="clearfix">
                  <span class="title">联系信息</span>
                </div>
              </template>
              <p><i class="el-icon-s-promotion"></i> 官网：<a href="http://www.wintell.cn/yingtai/toIndexPc.do" class="text-info" target="_blank">http://www.wintell.cn/yingtai/toIndexPc.do</a></p>
              <p><i class="el-icon-s-custom"></i> Email：hr@wintell.cn</p>
            </el-card>
          </div>
        </el-col>
        <el-col :xs="24" :sm="16" :md="16" :lg="14" :xl="14" class="home-media">
          <div class="home-card-item">
            <el-card class="box-card jz">
              <template #header>
                <div class="clearfix">
                  <span class="title">公众号</span>
                </div>
              </template>
              <p>瀛泰律师事务所</p>
              <!-- <img style="width: 700px; height: 360px" src="https://yxh-1301841944.cos.ap-chongqing.myqcloud.com/gfast/2022-04-19/jz.jpg"/>-->
            </el-card>
          </div>
        </el-col>
      </el-row>

	</div>
</template>

<script lang="ts"  setup>
import { toRefs, reactive, defineComponent, onMounted, ref, watch, nextTick, onActivated } from 'vue';
import * as echarts from 'echarts';
import { useStore } from '/@/store/index';



</script>

<style scoped lang="scss">
$homeNavLengh: 8;
.home-container {
	overflow: hidden;
	.home-card-one,
	.home-card-two,
	.home-card-three {
		.home-card-item,.home-card-top {
			width: 100%;
			height: 130px;
			border-radius: 4px;
			transition: all ease 0.3s;
			padding: 20px;
			overflow: hidden;
			background: var(--el-color-white);
			color: var(--el-text-color-primary);
			border: 1px solid var(--next-border-color-light);
			&:hover {
				box-shadow: 0 2px 12px var(--next-color-dark-hover);
				transition: all ease 0.3s;
			}
			&-icon {
				width: 70px;
				height: 70px;
				border-radius: 100%;
				flex-shrink: 1;
				i {
					color: var(--el-text-color-placeholder);
				}
			}
			&-title {
				font-size: 15px;
				font-weight: bold;
				height: 30px;
			}
		}
	}
	.home-card-one {
		@for $i from 0 through 3 {
			.home-one-animation#{$i} {
				opacity: 0;
				animation-name: error-num;
				animation-duration: 0.5s;
				animation-fill-mode: forwards;
				animation-delay: calc($i/10) + s;
			}
		}
	}
	.home-card-two,
	.home-card-three {
    .home-card-item{
      height: 500px;
    }
    .home-card-top{
      height: 250px;
      .box-card{
        padding: 15px 20px 20px 20px;
        p{margin-bottom: 10px;}
        &-item{margin-bottom: 20px;}
      }
    }
		.home-card-item, .home-card-top{
			width: 100%;
			overflow: hidden;
			.home-monitor {
				height: 100%;
				.flex-warp-item {
					width: 25%;
					height: 111px;
					display: flex;
					.flex-warp-item-box {
						margin: auto;
						text-align: center;
						color: var(--el-text-color-primary);
						display: flex;
						border-radius: 5px;
						background: var(--next-bg-color);
						cursor: pointer;
						transition: all 0.3s ease;
						&:hover {
							background: var(--el-color-primary-light-9);
							transition: all 0.3s ease;
						}
					}
					@for $i from 0 through $homeNavLengh {
						.home-animation#{$i} {
							opacity: 0;
							animation-name: error-num;
							animation-duration: 0.5s;
							animation-fill-mode: forwards;
							animation-delay: calc($i/10) + s;
						}
					}
				}
			}
		}
	}
  .text-info{color: #23c6c8;}
  .text-danger{color:#ed5565;}

  .git-res{
    margin-top: 20px;
  }
  .git-res .el-link{
    margin-right: 30px;
  }
  ul,li{ padding:0;margin:0;list-style:none}
  .product{
    margin-top: 50px;
    h3{margin-bottom: 15px;}
  }
  .product li{
    margin-bottom: 20px;
    float: left;
    width: 150px;
  }
  .box-card.xx{
    margin-top: 20px;
  }
}
</style>
